<template>
    <div id="main">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-select class="input_select" v-model="value" clearable placeholder="平台定期营收统计">
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-date-picker class="input_date" v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
            <el-date-picker class="input_date" v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div id="item_chart1"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            option :{
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data: ['总收入', '平均收入']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['2021-04-14', '2021-04-15', '2021-04-17', '2021-04-19', '2021-04-20', '2021-04-21', '2021-04-22', '2021-04-23', '2021-04-24', '2021-04-25'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '总收入',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value} 元'
                        }
                    },
                    {
                        type: 'value',
                        name: '数量',
                        min: 0,
                        max: 25,
                        interval: 5,
                        axisLabel: {
                            formatter: '{value} 次'
                        }
                    }
                ],
                series: [
                    {
                        name: '总收入',
                        type: 'bar',
                        itemStyle:{
                            normal:{
                                color:"#d53a35"
                            }
                        },
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name: '交易数量',
                        type: 'bar',
                        itemStyle:{
                            normal:{
                                color:"#51616d"
                            }
                        },
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name: '平均收入',
                        type: 'line',
                        yAxisIndex: 1,
                        itemStyle:{
                            normal:{
                                color:"#9ac9ce"
                            }
                        },
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            },
            formInline: {
                user: "",
                region: "",
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
            value1: "",
            value: "",
        };
    },
    mounted() {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            const myChart = this.$echarts.init(
                document.querySelector("#item_chart1")
            );
            myChart.setOption(this.option);
        },
        onSubmit() {
            console.log("submit!");
        },
    },
};
</script>

<style scoped lang="scss">
#main {
    box-sizing: border-box;
    padding: 20px;
    #item_chart1 {
        width: 1500px;
        margin: 0 auto;
        height: 500px;
        // background-color: rgba(180, 180, 180, 0.2);
    }
    .demo-form-inline {
        text-align: left;
        .input_date{
            margin-right: 10px;
        }
        .input_select{
            margin-right: 10px;
        }
    }
   
}
</style>